<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>科泰聊天室</title>
  <link href="css/chat.css" rel="stylesheet">
  </link>
  <link href="css/chat1.css" rel="stylesheet">
  </link>
</head>

<body>
  <!-- TODO 根据HTML结构分析，定义出父组件和子组件结构 -->
  <div id="app">
    <h1 class="title">科泰聊天室</h1>
    <h1 class="center"></h1>
    <!-- <div class="chat-window center"> -->
      <!-- <div class="chat-messages"> -->
        <parent>

        </parent>
        <!-- <div class="message received-message">
          <div class="message-received"><img src="images/avt-01.png" class="avatar"> <span
              class="message-content">好久不见！</span></div>
        </div>
        <div class="message sent-message">
          <div class="message-sent"><span class="message-content">是啊，好久不见了</span> <img src="images/avt-02.png"
              class="avatar"></div>
        </div>
        <div class="message received-message">
          <div class="message-received"><img src="images/avt-01.png" class="avatar"> <span
              class="message-content">最近怎么样？</span></div>
        </div> -->
      <!-- </div> -->
      <!-- <div class="chat-input"><input type="text" v-model="text" placeholder="请输入消息..."> <button @click="send()">发送</button></div> -->
    <!-- </div> -->
  </div>

  <!-- <div id="app1">
    <h1 class="center1"></h1>
        <parent1>

        </parent1>
  </div> -->

 <template id="news-list">
  <div class="chat-window center">
    <div class="chat-messages">
      <news-list v-for="item in items" :cal="item.cal" :src="item.src" :name="item.name"></news-list>
    </div>
    <div class="chat-input">
      <input type="text" v-model="sendMessage" placeholder="请输入消息..."> <button @click="send()">发送</button>
    </div>
  </div>
  </template>

  <template id="news-item">
    <news-item :class="`message ${cal}-message`"  v-show="name!=='' && name !== null">
      <div :class="`message-${cal}`"><img :src="src" class="avatar" v-show="cal==='received'"> <span
          class="message-content">{{name}}</span> <img :src="src" class="avatar" v-show="cal==='sent'"></div>
    </news-item>
  </template>

  <!-- <template id="news-list1">
    <div class="chat-window1 center1">
      <div class="chat-messages1">
        <news-list1 v-for="item in items1" :cal="item.cal" :src="item.src" :name="item.name"></news-list1>
      </div>
      <div class="chat-input1">
        <input type="text" v-model="sendMessage1" placeholder="请输入消息..."> <button @click="send()">发送</button>
      </div>
    </div>
    </template>
  
    <template id="news-item1">
      <news-item1 :class="`message1 ${cal}-message1`" >
        <div :class="`message-${cal}1`"><img :src="src" class="avatar1" v-show="cal==='received'"> <span
            class="message-content1">{{name}}</span> <img :src="src" class="avatar1" v-show="cal==='sent'"></div>
      </news-item1>
    </template> -->

  <script src="js/axios.js"></script>
  <script src="js/vue.js"></script>
  <script>
    // TODO 根据HTML结构分析，定义出父组件和子组件结构
    const newsItem = {
        template:'#news-item',
        props:["cal","src","name"]
    }

    const newsList={
      template:"#news-list",
      components:{
        "newsList":newsItem
      },
      data() {
        return {
          items:[
          ],
          sendMessage:''
        }
      },
      methods: {
        loginList(){
          axios.get("http://localhost:8080/api/vue").then(response=>{
            this.items = response.data;
          })
        },
        send(){
          if(this.sendMessage!==''){z
            axios.post("http://localhost:8080/api/add",{
              cal:"sent",
              src:"images/avt-02.png",
              name:this.sendMessage
            },{
              headers:{
                'Content-Type':'application/json'
              }
            }).then(response=>{
              this.items = response.data;
            })
            this.sendMessage = '';
          }
        }
      },
      created() {
        this.loginList();
      },
    }

    new Vue({
      el:"#app",
      components:{
        "parent":newsList
      }
    })

    // const newsItem1 = {
    //     template:'#news-item1',
    //     props:["cal","src","name"]
    // }

    // const newsList1={
    //   template:"#news-list1",
    //   components:{
    //     "newsList1":newsItem1
    //   },
    //   data() {
    //     return {
    //       items1:[
    //       ],
    //       sendMessage1:''
    //     }
    //   },
    //   methods: {
    //     loginList(){
    //       axios.get("js/news.json").then(response=>{
    //         this.items1 = response.data;
    //       })
    //     },
    //     send(){
    //       if(this.sendMessage1!==''){
    //         this.items1.push({
    //           cal:"received",
    //           src:"images/avt-02.png",
    //           name:this.sendMessage1
    //         });
    //         this.sendMessage1 = '';
    //       }
    //     }
    //   },
    //   created() {
    //     this.loginList();
    //   },
    // }


    // new Vue({
    //   el:"#app1",
    //   components:{
    //     "parent1":newsList1
    //   }
    // })
  </script>
</body>

</html>